{% extends 'apidoc/base.html' %}
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    {% block title %}
        apiapi
    {% endblock title %}
</head>
<body>
{% block content %}
    <div class="col-lg-12">
        <span class="glyphicon glyphicon-menu-hamburger" style="font-size:15px;padding-right: 5px;"></span>jdb.internet.friend.php(系统ID：10

        <hr style="color: #919ba4"/>
    </div>
    <div>
        <div class="col-lg-3">
            <div class="panel panel-default">
                <div class="panel-body">
                    <div id="tree" style="background: #b2dba1">

                    </div>
                    <p></p>
                </div>
            </div>
        </div>
        <div class="col-lg-9">
            <div class="panel panel-default">
                <div class="panel-heading" style="background: #b2dba1">请求参数</div>
                <div class="panel-body">
                    <table class="table table-bordered" id="tableinfo">
                        <tr id="fieldinfo">
                            <th>字段名</th>
                            <th>字段类型</th>
                            <th>是否必传</th>
                            <th>字段解释</th>
                        </tr>
                        <tbody class="body-field" id="tbody">
                            <tr>
                                <td>默认</td>
                                <td>默认</td>
                                <td>默认</td>
                                <td>默认</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <div>
                <div class="panel panel-default">
                    <div class="panel panel-heading" style="background: #b2dba1">返回参数</div>
                    <div class="panel-body" id="content">
                        <p id="delault-content">{
                            "test1": "wx9fdb8ble7ce3c68f",
                            "test2": "123456789",
                            "testData1": {
                            "testdatason1": "97895455"
                            "testdatason2":3,
                            "testData2": [
                            {
                            "testshuzu1":"12"
                            "testshuzu1":"11"
                            },
                            {
                            "testshuzu2":"13"
                            "testshuzu2":"14"
                            },
                            ,
                            {
                            "testshuzu3":"15"
                            "testshuzu3":"16"
                            }
                            ]
                            }
                            }
                        </p>
                    </div>


                </div>
            </div>
            <br><br>
            <div class="panel panel-default">
                <div class="panel-heading" style="background: #b2dba1">面板标题</div>
                <div class="panel-body">
                    <p>这是一个基本的面板内容。这是一个基本的面板内容。
                        这是一个基本的面板内容。这是一个基本的面板内容。
                        这是一个基本的面板内容。这是一个基本的面板内容。
                        这是一个基本的面板内容。这是一个基本的面板内容。
                    </p>
                </div>
                <ul class="list-group">
                    <li class="list-group-item">免费域名注册</li>
                    <li class="list-group-item">免费 Window 空间托管</li>
                    <li class="list-group-item">图像的数量</li>
                    <li class="list-group-item">24*7 支持</li>
                    <li class="list-group-item">每年更新成本</li>
                </ul>
            </div>
        </div>
    </div>

    <script type="application/javascript">
        function itemOnclick(value) {
            $.ajaxSetup({
                data: {csrfmiddlewaretoken: '{{ csrf_token }}'}
            });
            //获取标签对之间的内容，传给view
            var text = $(value).text();
            $.ajax({
                type: 'post',
                dataType: 'json',
                url: "{% url 'apidoc:nodeName'  %}",
                data: {'filename': text},
                success: function (datainfo) {
                    console.log(text);
                    console.log(datainfo.tradeui);
                    //添加前先删除content中信息,防止尾部添加。
                    $('#content').empty();
                    //对json字符串进行格式化
                    var result = JSON.stringify(JSON.parse(datainfo.tradeui), null, 2);
                    console.log(datainfo.fieldExplain)
                    console.log("bb:"+datainfo.fieldName[0]);

                    //添加文件信息至content中
                    //$('#content').append(datainfo.tradeui);
                    //展示格式化后的json数据
                    document.getElementById('content').innerText = result;
                    //添加入参数据-->table
                    $('tbody.body-field').empty();
                    for (i = 0; i <= datainfo.fieldExplain.length-1; i++) {

                        //添加新接口信息至标签
                        $('tbody.body-field').append("<tr id ="+i+"><td>"+datainfo.fieldName[i]+"</td><td>"+datainfo.fieldType[i]+"</td><td>"+datainfo.fieldisMuster[i]+"</td>+<td>"+datainfo.fieldExplain[i]+"</td></tr>");
                    }
                }
            })
        }
        //匿名函数：解决无法动态获取节点名称的问题
        $(function () {
            $.ajax({
                type: 'post',
                dataType: 'json',
                url: "{% url 'apidoc:pinInfo'  %}",
                data: {'filename': 'szszsz'},
                success: function (datainfo) {
                    console.log(datainfo);
                    //treeview [{}]格式，故在server返回dic外套层[]
                    var treeviewInfo = [datainfo];
                    //sercer返回成功，调用treeview渲染
                    $('#tree').treeview({
                        data: treeviewInfo
                    })
                },
                error: function (datainfo) {
                    alert(datainfo + 'is not exist')
                }
            })

        })
    </script>

{% endblock content %}
</body>
</html>
